<template>
  <div id="LabApplyItem">
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="危急值信息">
          <Splitpanes horizontal class="area">
            <!-- 左侧列表 -->
            <Pane :size="70">
              <div class="leftTable">
                <vxe-table ref="sysPostTable" border class="mytable-scrollbar" height="auto" :scroll-y="{ enabled:true }" resizable show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }"  :data="sysCriReportList" :loading="showLoading">
                  <vxe-column field="reportTime" title="上报时间" width="120">
                    <template #default="{ row }">
                      <span>{{ row.reportTime }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="patNo" title="病历号" width="120">
                    <template #default="{ row }">
                      <span>{{ row.patNo }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="patNa" title="病人姓名">
                    <template #default="{ row }">
                      <span>{{ row.patNa }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="reqDept" title="科室">
                    <template #default="{ row }">
                      <span>{{ row.reqDept }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="bedNo" title="床号">
                    <template #default="{ row }">
                      <span>{{ row.bedNo }}</span>
                    </template>
                  </vxe-column>

                  <vxe-column field="itemNo" title="检测项目">
                    <template #default="{ row }">
                      <span>{{ row.itemNo }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="currentResult" title="结果"></vxe-column>
                  <vxe-column field="enable" title="是否发布" width="80" align="center" checked-value="0" unchecked-value="1">
                    <template #default="{ row }">
                      <el-tag :type="getIsStaticTagType(row)">
                        {{ getIsStaticStatusDesc(row) }}
                      </el-tag>
                    </template>
                  </vxe-column>
                  <vxe-column field="remark" title="备注"></vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <!-- 右侧表单信息 -->
            <Pane :size="45">
              <el-tabs type="border-card">
                <el-tab-pane label="危急值审核">
                  <el-form ref="labFeeItemFormRef" :model="criReportForm" label-width="110px" class="form-input-m baseForm" v-loading="showLoading" inline-message>
                    <el-row :gutter="20">
                      <el-col :span="20">
                        <el-form-item label="审 核 人">
                          <VxePulldownSelection class="width-100-percentage" ref="employeeSelectRef" :url="'/api/user/getUserInfoList'" @confirmClick="SelectRowClick" :tableColumn="[
                        { title: '编号', field: 'username' },
                        { title: '名称', field: 'realname' }
                      ]" :aimKeys="[
                        { formKey: 'username', rowKey: 'username' },
                        { formKey: 'realname', rowKey: 'realname' }
                      ]" :displayTexts="['realname']" :displayTextObj="criReportForm.reviewerDoctor" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="20">
                        <el-form-item label="处 置 措 施" prop="treatmentMeasure">
                          <el-input  type="textarea"  v-model="criReportForm.treatmentMeasure" placeholder="处置措施" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-form-item class="form-footer">
                      <template #default>
                        <el-button type="primary" :autosize="{ minRows: 4}" :disabled="criReportForm.isReviewed == 1" @click="save()">审核</el-button>
                      </template>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from "@/stores/store";
import {VxeFormPropTypes} from "vxe-table";
import {IsEmpty} from "@/utils/common";
import VxePulldownSelection from '@/components/VxePulldownSelection.vue'; //引入下拉组件


// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let store = AppStore();

let sysCriReportList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let saveLoading = ref(false); //保存
let showDataLoading = ref(false);
let form = reactive({}); //右侧基本信息表单

let criReportForm = reactive({
  id: '',
  isReviewed:null,
  reviewerDoctor:'',
  treatmentMeasure:''
});


// 方法定义区 =============
onMounted(async () => {
  const query = proxy.$route.query as any;
  if (query.id) {
    criReportForm.id = query.id ? query.id : null;
    getCriReportList();
  }

});


// 点击组件表格行(上报人员)
function SelectRowClick(row) {
  criReportForm.reviewerDoctor = row.row.username;
}
function getIsStaticStatusDesc(row) {
  if (row.isReport == 1) {
    return '是';
  } else if (row.isReport == 0) {
    return '否';
  }
}
function getIsStaticTagType(row) {
  if (row.isReport == 1) {
    return 'success';
  } else if (row.isReport == 0) {
    return 'danger';
  }
}

// 获取申请项目列表
function getCriReportList() {
  if (IsEmpty(criReportForm.id)){
    VxeMessage("审核id不能为空", VxeNotifyType.error);
    return;
  }
  sysCriReportList.length = 0;
  showLoading.value = true;
  const url = '/cri/critical/report/findCriticalReportInfo';
  let obj = {
    id: criReportForm.id,
    isReviewed:0
  };
  proxy.$http
      .post(url, obj)
      .then((res: any) => {
        sysCriReportList.push(...res.data);
        if (sysCriReportList.length > 0) {
          rowClick({
            row: sysCriReportList[0]
          });
        }

        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}
// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  (proxy.$refs.sysPostTable as any).setCurrentRow(row);
  Object.assign(form, row);
  Object.assign(criReportForm, row);
};
// 保存
function save() {
  if (IsEmpty(criReportForm.reviewerDoctor)){
    VxeMessage("审核医生不能为空", VxeNotifyType.error);
    return;
  }
  if (IsEmpty(criReportForm.treatmentMeasure)){
    VxeMessage("处理措施不能为空", VxeNotifyType.error);
    return;
  }

  let  url = '/cri/critical/report/criticalReportChk';
  proxy.$http
      .post(url, criReportForm)
      .then((res: any) => {
        if (res.status.code === 1) {
          VxeMessage(res.status.msg, VxeNotifyType.success);
          Object.assign(criReportForm, res.data);
        }else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}


</script>
<style lang="scss" scoped>
#LabApplyItem {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;
      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
      }
      .el-tab-pane {
        height: 100%;
        .area {
          background-color: $base-white;
          // 附加按钮间距
          .button-blue,
          .button-red {
            margin: 5px 0 5px 5px;
          }
          .leftTable {
            height: calc(100%);
          }

          // 右侧基本信息表单
          .baseForm {
            .el-row {
              margin-left: 0 !important;
              margin-right: 0 !important;
            }
            .form-footer {
              .el-form-item__content {
                margin-left: 120px !important;
              }
            }
            .el-form-item--large {
              margin-bottom: 10px;
            }
            .el-radio {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
